<template>
	<view class="">
		<section class="container">
		    <section class="side" id="side" >
				    
		        <!-- 个人肖像 -->
		        <section class="me">
					<!-- 头像照片 -->
					<img class="avatar" src="https://img-blog.csdnimg.cn/20210425144925265.png" style="width: 120px;border-radius:50%;height: 120px;">
		            <h1 class="name">一粒程序米</h1>
		            <h4 class="info-job">混合移动开发 / 中山</h4>
		
		        </section>
		
		        <!-- 基本信息 -->
		        <section class="profile info-unit">
		            <h2>
		                <i class="fa fa-user" aria-hidden="true"></i>基本信息</h2>
		            <hr/>
		            <ul>
		                <li>
		                    <label>个人信息</label>
		                    <span>一粒程序米 / 女</span>
		                </li>
		                <li>
		                    <label>英语水平</label>
		                    <span>CET-4</span>
		                </li>
		            </ul>
		        </section>
		
		        <!-- 联系方式 -->
		        <section class="contact info-unit">
		            <h2>
		                <i class="fa fa-phone" aria-hidden="true"></i>联系方式</h2>
		            <hr/>
		            <ul>
		        
		                <li>
		                    <label>邮箱</label>
		                    <a style="font-size: 12px;"  href="mailto:wangjinchan_wjc@qq.com?subject=邮件主题&body=这是邮件的内容"  target="_blank">wangjinchan_wjc@qq.com</a>
		                </li>
		                <li>
		                    <label>博客</label>
		                    <a style="font-size:12px;" href="https://blog.csdn.net/weixin_43449246" target="_blank">https://blog.csdn.net/weixin_43449246</a>
		                </li>
		                <li>
		                    <label>Gitee</label>
		                    <a style="font-size: 12px;"  href="https://gitee.com/wangjinchan" target="_blank">https://gitee.com/wangjinchan</a>
		                </li>
		            </ul>
		        </section>
		
		        <!-- 技能点 -->
		      <section class="skill info-unit">
		            <h2>
		                <i class="fa fa-code" aria-hidden="true"></i>技能点</h2>
		            <hr/>
					<view class="my-progress" style="width: 80%;">
						<ul>
						    <li>
						        <label>HTML</label>
						        <progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
						    </li>
						    <li>
						        <label>CSS</label>
						        <progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
						    </li>
						    <li>
						        <label>JavaScript</label>
						        <progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
						    </li>
						    <li>
						        <label>Vue</label>
						        <progress percent="70" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
						    </li>
						    <li>
						        <label>java</label>
						        <progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
						    </li>
						    <li>
						        <label>Andorid</label>
						        <progress percent="75" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
						    </li>
							<li>
							    <label>iOS</label>
							    <progress percent="70" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
							</li>
							<li>
							    <label>c语言</label>
							    <progress percent="70" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
							</li>
						</ul>
					</view>
		           
		        </section>
		
		        <!-- 技术栈 -->
		       <div class="stack info-unit">
		                <h2><i class="fa fa-code" aria-hidden="true"></i>其他</h2>
		                <hr/>
		                <ul>
		                    <li>
		                        <label>前端</label>
		                        <span>vue、uni-app、Android、iOS</span>
		                    </li>
		                    <li>
		                        <label>后端</label>
		                        <span>springboot、MySQL</span>
		                    </li>
		                    <li>
		                        <label>其他</label>
		                        <span>Git、Photoshop </span>
		                    </li>
		                </ul>
		        </div>
		    </section>
		
		    <section class="main">
		
		        <!-- 教育经历 -->
		       <section class="edu info-unit">
		            <h2>
		                <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历</h2>
		            <hr/>
		            <ul>
		                <li>
		                    <h3>
		                        <span>韩山师范学院 - 电子信息工程</span>
		                        <time>2016.9-2020.6</time>
								
		                    </h3>
		                </li>
						<li>
							<p><b>主修课程:</b> c语言、Java、web技术、单片机应用课程设计、无线传感网技术、物联网企业项目实践</p>
						</li>
					
		            </ul>
		        </section>
				
				<section class="edu info-unit  ">
				    <h2>
				        <i class="fa fa-graduation-cap" aria-hidden="true"></i>荣誉奖项</h2>
				    <hr/>
					<ul >
						<li>1.获学校2020届优秀毕业生</li>
						<li>2.连续四年获学业奖学金</li>
						<li>3.2019年获第十届蓝桥杯算法Java软件B组竞赛省级三等奖</li>
						<li>4.2016年获学校"优秀团员"</li>
					</ul>
					
				</section>
		
		        <!-- 工作经历 -->
		       <section class="work info-unit">
		            <h2>
		                <i class="fa fa-shopping-bag" aria-hidden="true"></i>工作经历</h2>
		            <hr/>
		            <ul>
						<li>
						     <h4>
						         <span>[经历1]中山xxxx有限公司－前端开发工程师</span>
						         <time>2021.9-至今</time>
						     </h4>
						     <ul class="info-content" >
						        <li>1.参与项目功能模块实现</li>
								<li>2.开发安卓功能插件、iOS功能插件</li>
								<li>3.封装vue页面组件</li>
								<li>4.优化维护项目，修复bug</li>
								<li>5.从零搭建使用原生插件的uni-app项目</li>
						     </ul>
						 </li>
		                <li>
		                    <h4>
		                        <span>[经历2]中山市xxxxx有限公司-软件开发工程师</span>
		                        <time>2020.1 至 2021.8</time>
		                    </h4>
		                    <ul class="info-content" >
		                        <li>1.参与项目的需求分析、项目设计、模块开发；</li>
		                        <li>2.独立承担公司项目的功能设计、开发和实现，包括web前后端开发、安卓客户端；</li>
		                        <li>3.编写技术文档、数据库设计文档、项目使用说明文档</li>
								<li>4.负责项目推进及优化工作</li>
		                    </ul>
		                </li>
		        
		            </ul>
		        </section>
		
		        <!-- 项目经验 -->
		       <section class="project info-unit">
		            <h2><i class="fa fa-shopping-bag" aria-hidden="true"></i>企业项目</h2>
		            <hr/>
		            <ul>
						<li>
						    <h4>
						        <span>[项目1：xxx公司]  复心</span>
						        <time>2022.12-至今</time>
						    </h4>
							<p>技术栈：uni-app+echarts</p>
									项目介绍：
									<ul class="info-content">
										<li>
											情绪健康公益项目，一款针对疫情期间助力调节情绪，放松心情的app</a>
										</li>
									</ul>
									主要职责：
									<ul class="info-content" >
										<li>1.完成用户信息问卷表单，封装对应题型组件</li>
										<li>2.集成华为离线推送</li>
										<li>3.维护修复bug</li>
									</ul>
						    
						</li>
						<li>
						    <h4>
						        <span>[项目1：xxx公司]  数字健康</span>
						        <time>2022.7-至今</time>
						    </h4>
							<p>技术栈：uni-app+原生插件+echarts</p>
									项目介绍：
									<ul class="info-content">
										<li>
											用于做科研团队做实验,子版本交付于复旦华山医院睡眠障碍诊疗中心做临床实验，母版本一直在维护更新
										</li>
									</ul>
									
									主要职责：
									<ul class="info-content" >
									    <li>1.定时任务自动采集手环数据保存文件并上传阿里云，该实现已获发明专利（对接不同手环）</li>
										<li>2.集成个推离线推送，申请手机各大厂商离线推送的通道</li>
										<li>3.app主动采集手环数据并实时可视化的实现</li>
										<li>4.蓝牙断开提醒（熄屏状态下语音提醒）</li>
										<li>4.离线定时任务优化，提升用户体验</li>
									</ul>
						   
						</li>
		                <li>
		                    <h4>
		                        <span>[项目2：xxx公司]  复眠（已上架各大手机厂商应用商店）</span>
		                        <time>2021.9-至今</time>
		                    </h4>
							<p>技术栈：uni-app+原生插件+echarts+h5</p>
									项目介绍：
									<ul class="info-content">
										<li>
											将多年研究的成熟助眠方案(认知行为疗法)数字化，面向失眠用户提供专业睡眠评估，定制专业睡眠方案等服务。
										</li>
									</ul>
									
									主要职责：
									<ul class="info-content" >
									    <li>1.负责app框架搭建和对应功能模块的实现</li>
										<li>2.开发设计功能流程图，如手环数据采集上传、手环交互</li>
										<li>3.开发安卓、iOS原生插件（音频、集成xx手环、xx手环）</li>
										<li>4.封装ui组件（问卷组件、echarts图表，日历）</li>
										<li>5.重构优化app并不断维护修复bug,大幅度提升用户使用体验</li>
										<li>6.负责部分后端接口代码编写</li>
										<li>7.负责app后台管理系统前端部分ui组件封装</li>
										<li>8.对接uniapp支付功能(安卓的微信、支付宝支付、ios的内购支付)</li>
									</ul>
		                   
		                </li>
						<li>
						    <h4>
						        <span>[项目3：xx公司]  远程自动烧录测试云平台</span>
						        <time>2020.1-2021.8</time>
						    </h4>
							<p>技术栈：Android+springboot+MySQL+串口通信</p>
							项目介绍：
							<ul class="info-content">
								<li>
									将集成芯片自动化烧录和测试，并使用云平台进行监测（企业私用，不方便多说）
								</li>
							</ul>
							
							主要职责：
						    <ul class="info-content" >
						        <li>1.独立承担安卓app开发和web开发</li>
								<li>2.实现用户管理功能需求</li>
								<li>3.集成短信验证码</li>
								<li>4.集成支付宝</li>
								<li>5.实现即时聊天</li>
								<li>6.数据加密</li>
								<li>7.与硬件端进行串口通信</li>
						    </ul>
						</li>
		            </ul>
		        </section>
				<section class="project info-unit">
				     <h2><i class="fa fa-shopping-bag" aria-hidden="true"></i>个人项目</h2>
				     <hr/>
				    <ul>
				        <li>
				            <h4>
				                <span>1.基于语音控制的智能衣柜系统（毕业设计）</span>
				                <time>2019.10.15-至今</time>
				            </h4>
							<ul class="info-content">
								<li>
									<p>技术栈：单片机+zigbee+WiFi+Android+物联网三层+web数据持久化存储</p>
									<p>功能：语音控制 、除湿杀菌，手机APP远程控制、广域网控制，智能照明</p>
									<p>职责：负责整个系统结构搭建以及代码编写</p>
								</li>
							</ul>
				    		
				        </li>
						<li>
						    <h4>
						        <span>2.无线网络调试助手</span>
						        <time>2020.3.1-至今</time>
						    </h4>
							
							<ul class="info-content">
								<li>
									<p>技术栈：TCP/IP+经典蓝牙+低功耗蓝牙</p>
									<p>功能：集成tcp，udp，经典蓝牙，低功耗蓝牙的服务端和客户端。</p>
									<p>职责：负责整个系统结构搭建以及代码编写</p>
								</li>
							</ul>
						</li>
				    </ul>
				 </section>
				 <p style="color: #1ABC9C;font-size: 10px;position: absolute;right:60px;">更多项目详见gitee</p>
		        <!-- 自我评价 -->
		       <section class="work info-unit">
		            <h2>
		                <i class="fa fa-pencil" aria-hidden="true"></i>自我评价</h2>
		            <hr/>
		            <p><span class="mark-txt">“坚持学习与复盘，坚持运动与分享”</span></p>
				</section>
				<view class="">
					<button type="default" @click="handleClick">项目预览</button>
				</view>

		    </section>
		</section>
		<footer class="footer">
		    <p>© 2023 一粒程序米.文档最后更新时间为<time>2023年01月3日.</time></p>
		</footer>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			handleClick(){
				uni.navigateTo({
					url:'../imageView/imageView'
				})
			}
		}
	}
</script>

<style >

a{
	color: #1ABC9C;
}	
.my-progress{
	width: 80%;
	/* margin:  0 auto; */
}
.my-progress li{
	padding-top: 10px;
}

page {
  background: #e5e5e5;
  width: 100%;
  overflow-x: hidden;
  padding: 1rem 10%;
  padding-bottom: 0;
  box-sizing: border-box;
  font-size: .9em; }
  page .fa {
    margin-right: .1em; }
  page .info-unit {
    margin-bottom: 1rem; }
    page .info-unit h2 {
      font-weight: 700; }
    page .info-unit h3 {
      font-weight: 300; }

/* -------------------------------------------------
 * 头部部分
 * ------------------------------------------------- */
.header {
  display: none; }

/* -------------------------------------------------
 * 主体部分
 * ------------------------------------------------- */
.side {
  position: absolute;
  width: 20rem;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 20px #bbb;
  box-sizing: border-box;
  padding: 1rem; 

  }
  .container .side .me {
    text-align: center;
    margin-bottom: 2rem; }
   .container .side .me .portrait {
      margin: 0 auto;
      margin-bottom: 1rem;
      width: 8rem;
      height: 8rem;
      overflow: hidden;
      position: relative; }

      .container .side .me .portrait .loading span:nth-child(2) {
        -webkit-animation-delay: 0.2s; }
      .container .side .me .portrait .loading span:nth-child(3) {
        -webkit-animation-delay: 0.4s; }
      .container .side .me .portrait .loading span:nth-child(4) {
        -webkit-animation-delay: 0.6s; }
      .container .side .me .portrait .loading span:nth-child(5) {
        -webkit-animation-delay: 0.8s; }
      .container .side .me .portrait img {
        display: none;
        width: 8rem;
        height: 8rem;
        border-radius: 50%; }
  .container .side .info-unit ul li label {
    display: inline-block;
    width: 30%; }
  .container .side .info-unit ul li span {
    display: inline-block;
    vertical-align: top;
    width: 65%; }
.container .main {
  position: relative;
  margin-left: 22rem;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 20px #bbb;
  box-sizing: border-box;
  padding: 1rem; }
  .container .main .info-unit ul {
    box-sizing: border-box;
    padding-left: 1.2rem;
    padding-right: 0.8rem; }
    .container .main .info-unit ul li {
      margin-bottom: 1rem;
      list-style: disc; }
      .container .main .info-unit ul li h3 .link {
        font-size: .5rem;
        border: 1px solid #4db6ac;
        padding: 1px 3px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin-left: .5rem; }
      .container .main .info-unit ul li h3 time {
        text-align: right;
		font-size: 12px;
        float: right; }
      .container .main .info-unit ul li .info-content li {
        list-style: circle;
		font-size: 11px;
        margin: 0; }
      .container .main .info-unit ul li .info-content .fa {
        font-size: 1em; }

/* -------------------------------------------------
 * 文档底部
 * ------------------------------------------------- */
.footer {
  width: 100%;
  margin-top: 1rem;
  height: 2rem; }
  .footer p {
    line-height: 2rem;
    text-align: center;
    font-size: 0.8rem; }

/* -------------------------------------------------
 * 自定义部分
 * ------------------------------------------------- */
.fa {
  font-size: 1.2em; }

h2 {
  font-size: 1.2em; }

h3 {
  font-size: 1.1em; }

hr {
  margin-bottom: .4em; }

aside {
  position: fixed;
  right: 0;
  top: 30%;
  z-index: 2; }
  aside ul li {
    margin-bottom: 10px;
    -webkit-border-radius: 10px 0 0 10px;
    border-radius: 19px 0 0 10px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background: #1abc9c; }
    aside ul li a {
      display: inline-block;
      width: 80px;
      height: 38px;
      line-height: 38px;
      padding-left: 10px;
      color: #fff; }

mark {
  background: rgba(232, 232, 232, 0.8); }

@media screen and (max-width: 1169px) {
  .container .info-unit h3 span {
    display: block; }

  .container .info-unit h3 span.link {
    display: inline; }

  .container .project h3 span {
    display: inline; }

  .container .project h3 time {
    display: block; }

  .container .main .info-unit ul li h3 time {
    float: none;
    text-align: left; } }
@media screen and (max-width: 1034px) {
  body {
    padding: 1rem 3%; } }
@media screen and (max-width: 	750px) {
  .container .side {
    position: static;
    width: 95%;
    margin: 0 auto; }

  .container .main {
    position: static;
    margin-left: 0;
    width: 95%;
    margin: 0 auto;
    margin-top: 1.5rem; }

/*  #nav-m {
    display: none;
    position: fixed;
    width: 28px;
    height: 28px;
    right: 10px;
    bottom: 20px;
    box-shadow: 0 5px 20px #bbb;
    border-radius: 50%; }

  #nav-m svg {
    width: 28px;
    height: 28px; } */

  aside {
    display: none; } }
	
</style>
